<template>
  <div class="hello">
    <index-header></index-header>
    <div class="partner-wrap">
      <h2>媒体报道</h2>
      <div class="news">
        <a :href='item.linkTo' class="item" v-for="item of newsList" :key="item.id">
          <div class="left">
            <img :src="item.img" alt="" class="n-img">
            <div class="date">
              <p class="day" >{{item.date}}</p>
              <p class="time">{{item.time}}</p>
            </div>
          </div>
          <div class="right">
            <h3>{{item.title}}</h3>
            <p >{{item.detail}}</p>
            <div class="more">查看详情</div>
          </div>
        </a>
    </div>
    </div>
     <index-footer></index-footer>
  </div>
</template>

<script>
import IndexHeader from '@/pubic/IndexHeader'
import IndexFooter from '@/pubic/IndexFooter'

export default {
  name: 'newList',
  components: {
    IndexHeader,
    IndexFooter

  },
  data () {
    return {
      ellipsis: false,
      newsList: [
        {
          id: 'n-007',
          img: require('@/assets/img/index/news-7.jpg'),
          title: '纷呗车险分期牵手杭州运河汽车互联网小镇',
          detail: '近日，纷呗车险分期与杭州运河汽车互联网小镇达成战略共识。为小镇内的新能源汽车租赁公司以及网约车运营公司提供汽车保险分期等其他业务服务，双方已经初步确认了合作内容，接下来会对具体的合作细节进行探讨完善，尽快实施合作方针，达到合作目的。',
          linkTo: 'https://mp.weixin.qq.com/s?__biz=MzUzOTk4OTAyNw==&mid=2247483667&idx=1&sn=2c82fd7741ba1b508874dfefb2abfd0d&chksm=fac1445fcdb6cd49fe34ad99491d0dbea55bd922073fa3cdc71e11907b07bf4b063dad4f5ab1&scene=0&xtrack=1#rd',
          time: '2019-02',
          date: '21'
        }, {
          id: 'n-006',
          img: require('@/assets/img/index/news-6.jpg'),
          title: '纷呗车险分期与中国人寿财险达成业务合作',
          detail: '今日,纷呗车险分期与中国人寿财产保险股份有限公司进行了一次双方业务合作的商讨,并正式确认和达成合作意向。接下来双方会在新能源汽车等领域的车险分期服务进行全面合作,纷呗将成为中国人寿财险的重要合作伙伴。',
          linkTo: 'http://3g.163.com/news/article/E804KF66029397VS.html',
          time: '2019-02',
          date: '14'
        }, {
          id: 'n-005',
          img: require('@/assets/img/index/news-5.jpg'),
          title: '渤海财险浙江省分公司领导班子一行到 纷呗车险分期考察',
          detail: '1月21日，渤海财产保险股份有限公司浙江省分公司总经理刘总、副总经理李总携全体领导班子成员一行到纷呗车险分期总部考察访问，并与纷呗CEO蔡总进行......',
          linkTo: 'http://3g.163.com/news/article/E66R9SMP029397VS.html',
          time: '2019-01',
          date: '23'
        }, {
          id: 'n-004',
          img: require('@/assets/img/index/news-4.jpg'),
          title: '国资背景金融机构看好车险分期  先于银行进入布局',
          detail: '车险分期是目前金融细分领域较为火爆的一股势力，因其可以有效满足车辆运营企业和私家车主的多元化金融需求,所以近年来，我国车险分期业务发展迅速......',
          linkTo: 'http://www.3news.cn/pindao/2019/0104/1202319633.html',
          time: '2019-01',
          date: '04'
        }, {
          id: 'n-003',
          img: require('@/assets/img/index/news-3.jpg'),
          title: '汽车金融新业态——专访纷呗车险CEO',
          detail: '在当今互联网科技革命的推动下，金融市场向着多元化和纵深方向发展，车险随着汽车行业的稳步增长发展成一种稳定业态。车险分期则以一种崭新的姿态在金融业界破土而出,表现出强大的生命力......',
          linkTo: 'https://city.shenchuang.com/city/20190103/1482635.shtml',
          time: '2019-01',
          date: '03'
        }, {
          id: 'n-002',
          img: require('@/assets/img/index/news-2.jpg'),
          title: '纷呗点燃一把火，2019年车险分期星火燎原',
          detail: '随着金融业日益繁荣，分期模式已经逐渐发展成一种稳定的金融业态，预计未来的数十年间分期消费将会逐渐融入人们的生活。现在各种分期金融业务都在如火如荼地发展，车险分期是一种崭新的细分领域......',
          linkTo: 'http://3g.163.com/news/article/E4GNIADJ029397VS.html',
          time: '2019-01',
          date: '02'
        }, {
          id: 'n-001',
          img: require('@/assets/img/index/news-1.jpg'),
          title: '全国车险分期领导品牌—— 纷呗车险获千万级PreA轮投资',
          detail: '2018年对互联网行业投融资可以说是冰火两重天的一年。上半年，一级市场的投融资仍然狂热，各种融资新闻频频出现，而且估值惊人......',
          linkTo: 'http://hy.stock.cnfol.com/jinrongbaoxian/20181229/27143422.shtml',
          time: '2018-12',
          date: '29'
        }]
    }
  },
  created () {
    this.menu()
  },
  methods: {
    menu () {
      window.scrollTo(0, 0)
    }
  }

}
</script>

<style scoped lang='scss'>
.partner-wrap{
  font-size: 22px;
  margin-bottom: 50px;
  margin-top: 88px;
  h2{
    letter-spacing: 10px;
    font-size: 40px;
    color: #3a3a3a;
    padding: 50px 0 30px 0;
    font-weight: bold;
    text-align: center;
  }
  .news{
    padding: 0 40px;
    width: 100%;
    box-sizing: border-box;
    .item{
      height: 150px;
      border-bottom: 1px solid #828282;
      margin-top: 20px;
      padding-bottom: 18px;
      display: flex;
      font-size: 20px;
      color: #232323;
      .left{
        width: 230px;
        margin-right: 20px;
        position: relative;
        img{
          width: 230px;
          height: 130px;
        }
        .date{
          position: absolute;
          top: 0;
          left: 10px;
          width: 100px;
          height: 70px;
          background: #f87372;
          color: #fff;
          text-align: center;
          .time{
            // font-size: 14px;
            line-height: 20px;
          }
          .day{
            font-size: 36px;
          }

        }
      }
      .right{
        font-size: 20px;
        width: 407px;
        h3{
          font-size: 24px;
          line-height: 40px;
          font-weight: bold;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        p{
          padding-top: 8px;
          font-size: 22px;
          line-height: 26px;
          height: 60px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        .more{
          padding-top: 10px;
          color:#f87372;
          text-align: right;
        }
      }

    }

  }
}

</style>
